<template>
  <div class="book-list"v-infinite-scroll="infiniteHandler"
       infinite-scroll-disabled="loadingCommit"
       infinite-scroll-distance="10">
    <div class="book-item" v-for="(item,index) in recommend_books" @click="selectBook(item)">
      <div class="book-img">
        <img :src=item.book_cover>
      </div>
      <div class="book-content">
        <div class="book-title">
          <span class="title-left" v-bind:class="{'title-not-vip':is_vip===0}">{{item.book_name}}</span>
          <span class="title-right" v-show="(item.has_free === 1 || item.has_free === '1') && (is_vip===0 || is_vip === '0')"><i class="icon iconfont icon-shiting"></i> 免费试听</span>
        </div>
        <div class="book-chapter" style="-webkit-box-orient:vertical">{{item.book_desc || item.book_category_desc ||item.book_detail_desc}}</div>
        <div class="book-brief" ref="brief" style="-webkit-box-orient:vertical"><span class="read"><i class="icon iconfont icon-yueduliang" style="position: relative;top:.1rem"></i> {{item.read_total>100?item.read_total:item.book_id+2}}阅读</span><span class="collection"><i class="icon iconfont icon-shoucangliang" style="position: relative;top:.1rem"></i> {{item.collection_total>100?item.collection_total:item.book_id}}收藏</span></div>
      </div>
    </div>
  </div>
</template>

<script>
  import  $ from 'jquery'
  export default {
    name: "Index",
    data(){
      return{
        data: {
          share_id: this.$route.query.share_id || -1,
          share_token: this.$route.query.share_token || -1,
          page_index: 0
        },
        recommend_books: [],
        loadingCommit:false,
      }
    },
    // props:['book_list','is_vip'],
    props:['book_list','is_vip'],
    updated:function(){
      // 获取图片宽度
      $('.book-content').width($('.book-item').width()-$('.book-img').innerWidth())
    },
    methods:{
      // 选择书籍
      selectBook:function (item) {
        this.$emit('selectBook',item)
      },
      infiniteHandler: function () {
        this.loadingCommit = true;
        ++this.data.page_index
        // 获取书单列表只调用一次
        // if (this.data.page_index === 1) {
        //   this.getBookOrders()
        // }
        // 获取推荐书籍列表
        this.$axios.new_recommend_book({
          params: {
            is_recommend: 1,
            page_index: this.data.page_index,
            user_token: this.$Login.oauth_token.user_token
          }
        }).then(res => {
          // 只获取第一页
          if (res.data.qing_code === 303) {
            this.loadingCommit = true;
            this.page_index--;
          } else {
            this.recommend_books = this.recommend_books.concat(res.data.qing_data)
            this.loadingCommit = false;
            // this.infiniteHandler()
          }
        })
        if(this.book_list){
          this.recommend_books = this.book_list
        }else{
          // // 获取推荐书籍列表
          // this.$axios.new_recommend_book({
          //   params: {
          //     is_recommend: 1,
          //     page_index: this.data.page_index,
          //     user_token: this.$Login.oauth_token.user_token
          //   }
          // }).then(res => {
          //   // 只获取第一页
          //   if (res.data.qing_code === 303) {
          //     this.loadingCommit = true;
          //     this.page_index--;
          //   } else {
          //     this.recommend_books = this.recommend_books.concat(res.data.qing_data)
          //     this.loadingCommit = false;
          //     // this.infiniteHandler()
          //   }
          // })
        }

      }
    }
  }
</script>

<style scoped>
  @import "Index.css";
</style>

